<template>
  <div class="footerNav">
    <ul>
      <li v-for="(item) in itemBoxArr" @click="clickItme(item)" :key="item.id">
        <span v-if="item.id==1" @click="py">
          <img :src="item.imgN" alt v-if="item.path == currentPath">
          <img :src="item.imgY" alt v-else>
        </span>
        <span v-else>
          <img :src="item.imgN" alt v-if="item.path == currentPath">
          <img :src="item.imgY" alt v-else>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      currentPath: "/",
      itemBoxArr: [
        {
          imgY: require("../../assets/img/游戏1.png"),
          imgN: require("../../assets/img/游戏2.png"),
          id: 0,
          path: "/"
        },
        {
          imgY: require("../../assets/img/朋友1.png"),
          imgN: require("../../assets/img/朋友2.png"),
          id: 11,
          path: "/friend"
        },
        {
          imgY: require("../../assets/img/发现1.png"),
          imgN: require("../../assets/img/发现2.png"),
          id: 2,
          path: "/find"
          // path: "/download?type=download"
        },
        {
          imgY: require("../../assets/img/钱包1.png"),
          imgN: require("../../assets/img/钱包2.png"),
          id: 3,
          path: "/purse"
        },
        {
          imgY: require("../../assets/img/我的1.png"),
          imgN: require("../../assets/img/我的2.png"),
          id: 4,
          path: "/my"
        }
      ]
    };
  },
  mounted() {
    this.currentPath = this.$route.path;
  },
  methods: {
    clickItme(item) {
      this.currentItem = item.id;
      // if (item.id == "11") {
      //   Toast({
      //     message: "即将开放！",
      //     duration: 2000
      //   });
      //   return;
      // }
      this.$router.push(item.path);
    },
    py() {
      // Toast({
      //   message: "聊天直播请下载APP",
      //   duration: 2000
      // });
    }
  }
};
</script>
<style lang="stylus" scoped>
.footerNav {
  width: 100%;
  height: 1.38rem;
  line-height: 1.38rem;
  background: url('../../assets/img/tab栏底.png') no-repeat;
  background-size: 100% 107%;
  position: fixed;
  bottom: 0;
  left: 0;

  ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    padding-top: 12px;

    li {
      flex: 1;

      img {
        width: 0.42rem;
        height: 0.77rem;
        margin-top: 0.22rem;
        display: block;
        margin: 12px auto 0 auto;
      }
    }

    li:nth-child(2) {
      img {
        width: 0.52rem;
        height: 0.71rem;
        position: relative;
        top: 2px;
      }
    }

    li:nth-child(3) {
      img {
        width: 1.14rem;
        height: 1.29rem;
        position: relative;
        top: -26px;
      }
    }

    li:nth-child(4) {
      img {
        width: 0.41rem;
        height: 0.71rem;
        position: relative;
        top: 2px;
      }
    }

    li:nth-child(5) {
      img {
        width: 0.44rem;
        height: 0.78rem;
        position: relative;
        top: 0px;
      }
    }
  }
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .footerNav {
    width: 100%;
    height: 1.38rem;
    line-height: 1.38rem;
    background: url('../../assets/img/tab栏底.png') no-repeat;
    background-size: 100% 107%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: 0.34rem;
  }
}
</style>
